<!-- 组件 底部导航栏 -->
<template>
  <div class="FootTabbar">
    <!-- route 路由模式 -->
    <van-tabbar v-model="active" route>
      <van-tabbar-item :icon="item.icon" :name="item.name" :to="`/${item.name}`"
        v-for="(item, i) of tabbar" :key="i" >{{ item.title }}</van-tabbar-item >
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "FootTabbar",
  data() {
    return {
      tabbar: [
        { icon: "home-o", name: "home", title: "首页" },
        { icon: "apps-o", name: "sort", title: "分类" },
        { icon: "orders-o", name: "menu", title: "菜谱" },
        { icon: "cart-o", name: "myCart", title: "购物车" },
        { icon: "manager-o", name: "me", title: "我的" },
      ],
      active: 0,
    };
  },
};
</script>

